<template>
	<uni-popup :show="showSelect" type="bottom" @change="PopupChange">
		<view class="cu-bar bg-gray">
			<view class="nav">
				<view @click="DateClick" class="cu-item" :class="current==0?'text-blue cur':'text-gray'">
					{{year}}{{$t('selectDate').Y}}{{addTime(month)}}{{$t('selectDate').M}}{{addTime(day)}}{{$t('selectDate').D}}
				</view>
				<view v-if="timetype=='noon' || timetype=='hour'" @click="TimeClick" class="cu-item" :class="current==1?'text-blue cur':'text-gray'">
					{{timetype=='noon'? noons[noon]:addTime(hour)+$t('selectDate').h+addTime(minute)+$t('selectDate').m}}
				</view>
			</view>
			<view class="action" @click="Complete">
				<text class="text-blue">{{$t('sure')}}</text>
			</view>
		</view>

		<swiper v-if="showSelect" class="swiper-content" :current="current">
			<swiper-item @touchmove.stop>
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}{{$t('selectDate').year}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{addTime(item)}}{{$t('selectDate').mounth}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{addTime(item)}}{{$t('selectDate').day}}</view>
					</picker-view-column>
				</picker-view>
			</swiper-item>

			<swiper-item @touchmove.stop>
				<picker-view v-if="timetype=='noon'" :indicator-style="indicatorStyle" @change="TimeChange" :value="noonvalue">
					<picker-view-column>
						<view class="item" v-for="(item,index) in noons" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
				<picker-view v-if="timetype=='hour'" :indicator-style="indicatorStyle" @change="TimeChange" :value="hourvalue">
					<picker-view-column>
						<view class="item" v-for="(item,index) in hours" :key="index">{{addTime(item)}}{{$t('selectDate').hour}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in minutes" :key="index">{{addTime(item)}}{{$t('selectDate').minute}}</view>
					</picker-view-column>
				</picker-view>
			</swiper-item>
		</swiper>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name: 'select-date',
		components: {
			uniPopup
		},
		data() {
			//日期选择
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()

			for (let i = 1990; i <= date.getFullYear() + 30; i++) {
				years.push(i)
			}

			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}

			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			
			console.log(day)

			//时间设置 start
			const hours = []
			const hour = date.getHours()
			const minutes = []
			const minute = 0

			const noons = [this.$t('selectDate').am, this.$t('selectDate').pm]
			const noon = hour >= 0 && hour <= 12 ? 0 : 1

			for (let i = 0; i <= 24; i++) {
				hours.push(i)
			}
			for (let i = 0; i <= 60; i++) {
				minutes.push(i)
			}
			//时间设置 start

			return {
				current: 0,
				//日期相关
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				hour,
				hours,
				minute,
				minutes,
				value: [year - 1990, month - 1, day - 1],
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
				soonerlater: '',
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				//时间相关
				noonvalue: [noon],
				noons,
				noon,
				hourvalue: [hour, 0],
				showSelect:false
			};
		},
		props: {
			open: {
				type: Boolean,
				default: false
			},
			timetype: {
				type: String,
				default: 'hour'
			},
			name: {
				type: String,
				default: ''
			}
		},
		watch: {
			open(newValue) {
				this.showSelect = newValue
			}
		},
		methods: {
			clear() {},
			addTime(time){
				if(time<10){
					time='0'+time
				}
				return time
			},
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			PopupChange(e) {
				this.current = 0
				this.value = [this.year - 1990, this.month - 1, this.day - 1]
				this.noonvalue = [this.noon]
				this.$emit('change', {
					show: e.show
				})
			},
			TimeChange(e) {
				const val = e.detail.value
				if (val.length > 1) {
					this.hour = this.hours[val[0]]
					this.minute = this.minutes[val[1]]
					// this.hourvalue = [this.hour,this.minute]
				} else {
					this.noon = val[0]
				}
				console.log(val)
			},
			DateClick() {
				this.current = 0
			},
			TimeClick() {
				this.current = 1
			},
			Complete() {
				if(this.timetype !='day' && this.current == 0) {
					this.current = 1
					return
				}
				var timetype = this.timetype
				let date = this.DateFormat()
				console.log(date)
				let time = date.time
				let timestamp = date.timestamp
				let title = ''
				switch (timetype) {
					case 'day':
						title = time.substr(0,10)
						break;
					case 'noon':
						title = `${time.substr(0,10)} ${this.noons[this.noon]}`
						break;
					case 'hour':
						title = time.substr(0,16)
						break;
					default:
						break;
				}
				console.log(title)
				this.$emit('complete', {
					date: {
						time:time,
						title:title,
						noon: this.noon,
						timestamp:timestamp
					},
					type: timetype,
					name: this.name
				})
				this.showSelect =false
			},
			DateFormat() {
				//此转化为格林威治时间，需要加8小时转为北京时间
				let date = new Date()
				date.setFullYear(this.year)
				date.setMonth(this.month - 1)
				date.setDate(this.day)
				// console.log(this.$constant.BASEURL)
				if(this.$constant.PROJECT_VERSION == this.$constant.PROJECT_YINNI){
					//印尼时间
					date.setHours(this.hour + 7)
				}else{
					//
					date.setHours(this.hour + 8)
				}
				date.setMinutes(this.minute)
				date.setSeconds(0)
				return {
					time:date.toJSON().substr(0, 19).replace('T', ' ').replace(/-/g, '-'),
					timestamp:date.getTime()
				}
			}
		}
	}
</script>


<style>
	picker-view {
		width: 100%;
		height: 600upx;
	}

	.item {
		line-height: 100upx;
		text-align: center;
	}

	/* 	.swiper-item{
		
	} */
	.swiper-content {
		background-color: #FFFFFF;
		width: 100%;
		height: 600upx;
		font-size: 14px;
	}

	.bg-gray {
		background-color: #F0F0F0;
	}
</style>
